<template>
	<view class="">
		<!-- 新品排行 -->
		<view class="rank" style="display: none;">
			<view class="upNav">
				<image src="../../static/img/goodsInfo/navtabimg02.png"></image>
				<!-- <view class="row">
          <view class="navTitle">15日新品榜</view>
          <view class="cont">品质尖货人人爱</view>
        </view> -->
			</view>
			<view class="rank-list" v-for="(row, index) in rankList" :key="index" @click="goGoodsInfo(row.id)">
				<view class="imgbox">
					<image :src="row.img" mode="widthFix"></image>
					<image v-if="index == 0" src="../../static/img/goodsInfo/top01.png" mode="widthFix" class="topimg"></image>
					<image v-if="index == 1" src="../../static/img/goodsInfo/top02.png" mode="widthFix" class="topimg"></image>
					<image v-if="index == 2" src="../../static/img/goodsInfo/top03.png" mode="widthFix" class="topimg"></image>
					<view v-if="!(index == 0 || index == 1 || index == 2)" class="rank-tag">{{ index + 1 }}</view>
				</view>
				<view class="plank">
					<view class="title">{{ row.title }}</view>
					<text class="cont">{{ row.cont }}</text>
					<view class="tags">
						<view v-for="(val, index2) in row.tags" :key="index2" class="tag">{{ val }}</view>
					</view>
					<view class="footer">
						<view class="price">
							<text>¥</text>
							{{ row.price }}
						</view>
						<view class="oldPrice">¥{{ row.oldPrice }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="product-list">
			<view class="product" v-for="(product,index) in productList" :key="product.id" @tap="toGoods(product)">
				<view class="imgBox">
					<image mode="widthFix" :src="product.mainImagePath"></image>
					<view class="tagBox">
						<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in product.tags"
						 :key="index">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="name">{{ product.name }}</view>
				<view class="cont">{{ product.cont }}</view>
				<view class="info">
					<view class="price">{{ product.price }}</view>
					<view class="slogan">{{ product.slogan }}</view>
				</view>
			</view>
		</view>
		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 新品排行
				rankList: [],

				//猜你喜欢列表
				productList: [],
				microShopId:'',
				loadingText: '正在加载...'
			};
		},
		onPageScroll(e) {
			// 判断tab分类位置
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			let len = this.productList.length;
			if (len >= 40) {
				this.loadingText = '到底了';
				return false;
			}
			// // 演示,随机加入商品,生成环境请替换为ajax请求
			// let end_goods_id = this.productList[len - 1].goods_id;
			// for (let i = 1; i <= 10; i++) {
			// 	let goods_id = end_goods_id + i;
			// 	let p = {
			// 		goods_id: goods_id,
			// 		img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
			// 		name: '商品名称商品名称商品名称商品名称商品名称',
			// 		price: '￥168',
			// 		slogan: '1235人付款'
			// 	};
			// 	this.productList.push(p);
			// }
		},

		onLoad: function(option) {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}
			
			
			//option为object类型，会序列化上个页面传递的参数
			console.log(option.cid); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title: option.name
			});
			this.getLanguage();
			
			this.getIndexList();
		},
		onReady() {},
		methods: {
			getLanguage() {
				var that = this;
				console.log(that.$i18n.locale)
				if (that.$i18n.locale === 'zh-CN') {
					uni.setNavigationBarTitle({
						title: '每日上新'
					});
				} else if (that.$i18n.locale === 'en-US') {
					uni.setNavigationBarTitle({
						title: 'New every day'
					});
				}
			},
			goGoodsInfo(id) {
				uni.navigateTo({
					url: `/pages/goods/goods?${id}`,
					success: res => {},
					fail: () => {}
				});
			},
			getIndexList() {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/home/homePage', //仅为示例，并非真实接口地址。
					data: {
						microShopId: this.microShopId
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/json ' //自定义请求头信息
					},
					success: res => {
						console.log(res.data.data.dailyNewGood.list);
						this.productList = res.data.data.dailyNewGood.list;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	// 新品排行
	.rank {
		background-color: #fff;
		margin: 0 20upx;
		padding: 20upx;

		.upNav {
			position: relative;
			margin: 0 -20upx;

			image {
				display: flex;
				width: 100%;
				height: 100upx;
				opacity: 1;
				border-radius: 20upx 20upx 0upx 0upx;
				object-fit: cover;
			}

			.row {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 20upx;
				display: flex;
				align-items: flex-end;

				.navTitle {
					white-space: pre-wrap;
					box-sizing: border-box;
					display: block;
					flex-shrink: 0;
					font-size: 36upx;
					font-weight: bold;
					color: rgb(51, 51, 51);
				}

				.cont {
					white-space: pre-wrap;
					box-sizing: border-box;
					flex-shrink: 0;
					font-size: 26upx;
					line-height: 40upx;
					color: rgb(102, 102, 102);
					margin-left: 20upx;
				}
			}
		}

		.rank-list {
			display: flex;
			margin-bottom: 20upx;

			&:last-child {
				margin-bottom: 0upx;
			}

			.imgbox {
				position: relative;
				width: 220upx;
				height: 220upx;

				image {
					width: 220upx;
					height: 220upx;
					flex-shrink: 0;
					display: block;
					border-radius: 20upx;
				}

				.topimg {
					position: absolute;
					top: 0;
					left: 0;
					width: 80upx;
				}

				.rank-tag {
					background-color: #faf4ea;
					color: #c0985d;
					text-align: center;
					width: 80upx;
					height: 50upx;
					position: absolute;
					top: 0;
					left: 0;
					width: 80upx;

					&:before {
						position: absolute;
						bottom: -30upx;
						left: 0upx;
						content: '';
						border-right: 42upx solid #faf4ea;
						border-bottom: 30upx solid transparent;
					}

					&::after {
						position: absolute;
						bottom: -30upx;
						right: 0upx;
						content: '';
						border-left: 42upx solid #faf4ea;

						border-bottom: 30upx solid transparent;
					}
				}
			}

			.plank {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				height: 220upx;
				margin-left: 20upx;
				overflow: hidden;

				.title {
					font-size: 30upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.cont {
					display: inline-block;
					min-width: 10upx;
					color: #999;
					font-size: 28upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.tags {
					display: flex;

					.tag {
						color: #fff;
						width: 60upx;
						text-align: center;
						flex-shrink: 0;
						margin: 5upx;
						flex-grow: 0;
						background-color: #cc463c;
						font-size: 20upx;
						border-radius: 5upx;
					}
				}

				.footer {
					margin-top: auto;
					display: flex;
					align-items: flex-end;

					.price {
						font-size: 38upx;
						font-weight: bold;
						color: #ff0000;

						text {
							font-size: 28upx;
							font-weight: 400;
						}
					}

					.oldPrice {
						margin-left: 20upx;
						font-size: 32upx;
						text-decoration: line-through;
						color: #999;
					}
				}
			}
		}
	}

	.product-list {
		margin-top: 20upx;
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 20upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

			.imgBox {
				position: relative;

				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}

				.tagBox {
					position: absolute;
					left: 2upx;
					bottom: 10upx;
					width: 100%;

					.tags {
						padding: 2upx 10upx;
						font-size: 24upx;
						margin-right: 10upx;
						border-radius: 5upx;
						color: #fff;
						display: inline-block;

						&.red {
							background-color: #d85f61;
						}

						&.yellow {
							background-color: #ffcc4a;
						}

						&.green {
							background-color: #6fd85f;
						}
					}
				}
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}

			.cont {
				width: 92%;
				padding: 0upx 4%;
				font-size: 28upx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				color: #666;
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}

				.slogan {
					color: #807c87;
					font-size: 24upx;
				}
			}
		}
	}

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
</style>
